<!DOCTYPE HTML>
<div id="parent1">
    <mat id="scroller">
          <div id="sticky">This should stay sticky</div>
          <mat id="spacer"></mat>
    </mat>
</div>

<style>
#parent1 {
    height: 640px;
    width: 360px;
    perspective: 10px;
}
#scroller {
    display: block;
    height: 640px;
    width: 360px;
    overflow: hidden auto;
}
#sticky {
    position: sticky;
    top: 0px;
}
#spacer {
    display: block;
    height: 2000px;
}
</style>


<script src="../../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  var scroller = document.getElementById("scroller");
  // See crbug/983209: keyboard or mouse wheel (not just setting scroll
  // offset) was required to see this bug.
  scrollerMidX = scroller.offsetLeft + scroller.offsetWidth / 2;
  scrollerMidY = scroller.offsetTop + scroller.offsetHeight / 2;
  const pointerActions = [{
      source: "touch",
      actions: [
        { name: "pointerDown", x: scrollerMidX, y: scrollerMidY },
        { name: "pointerMove", x: scrollerMidX, y: scrollerMidY - 50 },
        { name: 'pause', duration: 100},
        { name: "pointerUp" },
      ],
    }];
  if (window.chrome && chrome.gpuBenchmarking) {
    chrome.gpuBenchmarking.pointerActionSequence(pointerActions, finishRepaintTest);
  } else {
    sticky.innerHTML = "This test requires gpuBenchmarking";
    finishRepaintTest();
  }
}
window.testIsAsync = true;
onload = runRepaintTest;
</script>
